<!DOCTYPE html>
<html>

<head>
    <link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
    <meta charset="utf-8">
    <!--自动刷新，1s=1-->
    <!--<META http-equiv="Refresh" content="3">-->
    <!--<meta http-equiv="X-UA-Compatible" content="IE=7" />-->
    <meta http-equiv="X-UA-Compatible" cotent="IE=edge,chrome=1" />
    <!--禁止缓存-测试时用-->
    <meta http-equiv="expires" content="0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <!--禁止缓存-测试时用-->
    <!--禁止禁止识别电话号码和邮件-->
    <meta name="format-detection" content="telephone=no, email=no" />
    <!--禁止禁止识别电话号码和邮件-->
    <!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
    <meta name="x5-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <!--x5内核浏览器包括：QQ浏览器，qq,微信内置的浏览器（ 竖屏显示、以及全屏显示）-->
    <!--UC浏览器竖屏显示和全屏显示-->
    <meta name="screen-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <!--UC浏览器竖屏显示和全屏显示-->
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
    <link rel="stylesheet" href="../muban/css/style.css">
    <link rel="stylesheet" href="css/auto-number.css">
    <script src="../lib/js/flexible.min.js"></script>
    <title>链接序号自增长生成器</title>
</head>

<body>
    <div class="container">
        <h3>输入原始链接</h3>
        <div class="before">
            <textarea class="big front" rows="4" placeholder="请输入链接前缀"></textarea>
            <div class="qujian">
            <input class="small start" type="number" placeholder="请输入开始序号" value="">
            <input class="small end" type="number" placeholder="请输入结束序号" value="">
            </div>
            <input class="big back" type="text" placeholder="请输入链接尾巴" value="">
        </div>

        <button id="doCalc">生成</button>
        <h3>结果<div>点击下面文字可全选内容，然后复制即可</div></h3>
        <div class="after">
            <div class="copy">
            </div>
                
        </div>

    </div>
    <script src="../lib/js/jquery.min.js"></script>
    <script language="javascript">
        $('#doCalc').click(function () {
            var url1 = $('.front').val();
            var url2 = $('.back').val();
            var start = $('.start').val();
            var end = $('.end').val();
            var result='';

            if(url1 != '' && url2 != '' && start != '' && end != ''){
                for(var i = start;i<=end;i++){
                    result += url1 + i + url2 +'<br />';
                    $('.copy').html(result);
                }
            }else{
                alert('文本框内容不能为空')
            }
        });
    </script>

</body>

</html>